<?php
  header("Content-type: text/html; charset=utf-8");
    $db_host = "47.115.11.83";
    $db_user = "root";
    $db_password = "GXyinongle01";
    $db_database = "choujiang";
    $link= new mysqli($db_host,$db_user,$db_password,$db_database);
    $sql_user='select name,phone from user';
    $sql_prize='select prizename from prizelist';
    $link->query("SET NAMES utf8");
    $result_user=mysqli_query($link,$sql_user);
    $result_prize=mysqli_query($link,$sql_prize);
    $i = 0;
    $num=0;
    $members = array();
    $prizes = array();
    while($member=mysqli_fetch_assoc($result_user)){
        $members[$num] = $member;
        $num++;
    }
    while($prize=mysqli_fetch_assoc($result_prize)){
        $prizes[$i] = $prize;
        $i++;
    }
    $user = array_column($members,'name');
    $phone = array_column($members,'phone');
    $prize = array_column($prizes,'prizename');
 ?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta charset="utf-8">
<title>乐村淘抽奖</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<link href="mycss.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="favicon.ico">
<style type="text/css">

</style>
</head>
<body>
    <div class="css1">
        <div class="css2">
           <img src="lecuntao.png" alt="乐村淘" class='lecuntao'>
           <img src="title.png" alt="标题" class='title'>
            <div class="awardLevel">
                <div class="jiangpin"> <p>奖品</p></div>
                <div class="awardselect">
                    <select class="mySelect" name="mySelect" id="mySelect">
                    <?php $i=0;foreach($prize as $val){ ?>
                        <option class="option" value="<?php echo $prize[$i]?>"><?php echo $prize[$i]?></option>
                    <?php $i++;} ?>
                    </select>
                </div>
            </div> 
            <div class="container">
                <div class="awardname1">
                    <div class="award1">中奖者:</div>
                    <div class="name1">广西乐村淘</div>
                </div>
                <div class="awardname2">
                    <DIV class="award2"><P>手机号码：</P></DIV>
                    <div class="name2">888****8888</div>
                </div>
                <!-- <img  class="start" src="choujiang.png" onclick="start()"/>  -->
                <div class="cjb"><button class="start"  onclick="start()">开始抽奖</button></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var phone=<?php print_r(json_encode($phone));?>;//json_encode() 用于对变量进行 JSON 编码，该函数如果执行成功返回 JSON 数据
        var user=<?php echo json_encode($user);?>;
        var prize=<?php echo json_encode($prize);?>;
		var btn=true; //按钮状态未开始还是结束
        var time=0; //定时器
        var key=0;
		function runTime(){
			clearInterval(time);
			time=setInterval('trunNum()',80);
		}
		function start(){
			if(btn){
					btn=false;
					$("button").text("结束抽奖");
					runTime();	
			}else{
				btn=true;
				$("button").text("开始抽奖");
                clearInterval(time);
                var prizename=$("#mySelect option:selected").val();
                $.ajax({
                    type: "POST",
                    url: 'savelucky.php',
                    dataType: "json",
                    data: {
                        name:user[key],
                        phone:phone[key],
                        prize:prizename,
                    },
                    success: function (res) {
                        alert('成功');
                    } 
                });
            }
            
            
        }

		function trunNum(){
			key=Math.floor(Math.random()*(phone.length));
            $(".name1").text(user[key]);
            $(".name2").text(phone[key].toString().substr(0, 3)+'****'+phone[key].toString().substr(7));
		}
    </script>
</body>
</html>